<template>
	<view>
		<u-popup  v-model="orderjiheshow" mode="center" width="80%" ref="auth" :mask-close-able="false" :custom="true" :mask-click="false" @close="closeorderjihe">
            <view class="popone" v-if="orderjihestatus ==1 ">
                <image class="bg" :src="ossThree('/uploads/20250404/a6740382ebb9492d9ed8c12c1e42d198.png')" mode="" />
                <view class="phonenav">
                    <view class="cha" @click="closeorderjihe">
                        <image class="icon_gbcha" src="/static/img/icon_gbcha.png" mode="" />
                    </view>
                    <text class="jiename">确认开工</text>
                    <view class="queli">
                        <view class="queitem">
                            <image class="icon_xz_s" src="/static/img/icon_xz_s.png" mode="" />
                            <text>我已到达任务地点</text>
                        </view>
                        <view class="queitem">
                            <image class="icon_xz_s" src="/static/img/icon_xz_s.png" mode="" />
                            <text>我已和老板沟通干活内容</text>
                        </view>
                        <view class="queitem">
                            <image class="icon_xz_s" src="/static/img/icon_xz_s.png" mode="" />
                            <text>老板通知我现在开始干活</text>
                        </view>
                    </view>
                    <view class="dianbtn" @click="getqueren()">
                        <text class="bm">确认</text>
                    </view>
                    <text class="kaolv"  @click="closeorderjihe">取消</text>
                </view>
                
            </view>
            <view class="popone" v-if="orderjihestatus ==2 ">
                <image class="bg" :src="ossThree('/uploads/20250404/a6740382ebb9492d9ed8c12c1e42d198.png')" mode="" />
                <view class="phonenav">
                    <view class="cha" @click="closeorderjihe">
                        <image class="icon_gbcha" src="/static/img/icon_gbcha.png" mode="" />
                    </view>
                    <text class="jiename">确认开工</text>
                    <text class="kmiao">请向老板询问4位数字开工码</text>
                    <view class="yanbor">
                        <u-message-input :focus="true" @finish="finish" v-model="kgma" mode="box" active-color="#111111"></u-message-input>
                    </view>
                    <view class="dianbtn" @click="getkaigong" style="margin-top: 30rpx;">
                        <text class="bm">提交</text>
                    </view>
                    <text class="kaolv"  @click="closeorderjihe">取消</text>
                </view>
                
            </view>
            <view class="popone" v-if="orderjihestatus ==3 ">
                <image class="bg" :src="ossThree('/uploads/20250404/a6740382ebb9492d9ed8c12c1e42d198.png')" mode="" />
                <view class="phonenav">
                    <view class="cha" @click="closeorderjihe">
                        <image class="icon_gbcha" src="/static/img/icon_gbcha.png" mode="" />
                    </view>
                    <text class="jiename">实名打卡</text>
                    <text class="kmiao">为保证本人打卡，老板要求实名核验。</text>
                    <text class="renxie" @click.stop="navrouter('/pages/my/yhXieyi?key=nnrjrlyzxy')">《人脸验证服务协议》</text>
                    <view class="tuview">
                        <view class="tuitem tuchuan" @click="upload(1)" v-if="image">
                            <image class="icon_zp" :src="ossThree(image)" mode="" />
                        </view>
                        <view class="tuitem"  @click="upload(1)" v-if="!image">
                            <image class="icon_zp" src="/static/img/icon_zp.png" mode="" />
                            <text>人脸照片</text>
                        </view>
                       
                    </view>
                    <view class="dianbtn" @click="getrenlian">
                        <text class="bm">确认</text>
                    </view>
                    <!-- <text class="kaolv"  @click="closeorder">取消</text> -->
                </view>
                
            </view>
            <view class="popone" v-if="orderjihestatus ==4">
                <image class="bg" :src="ossThree('/uploads/20250404/a6740382ebb9492d9ed8c12c1e42d198.png')" mode="" />
                <view class="phonenav">
                    <view class="cha" @click="closeorderjihe">
                        <image class="icon_gbcha" src="/static/img/icon_gbcha.png" mode="" />
                    </view>
                    <image class="img_cg" src="/static/img/img_cg.png" mode="" />
                    <text class="yikai">已开工</text>
                    <!-- <view class="kaiti">
                        <view class="kaione">
                            <image class="icON_bz" src="/static/img/icON_bz.png" mode="" />
                            <text class="jianame">已加入 用工意外保障</text>
                        </view>
                        <text class="youxiao">有效时间24小时，如发生意外请注意在48小时内申请理赔</text>
                    </view> -->
                    <view class="dianbtn" @click="closeorderjihe">
                        <text class="bm">确定</text>
                    </view>
                    <!-- <text class="kaolv"  @click="closeorder">取消</text> -->
                </view>
                
            </view>
            <view class="popone" v-if="orderjihestatus ==5">
                <image class="bg" :src="ossThree('/uploads/20250404/a6740382ebb9492d9ed8c12c1e42d198.png')" mode="" />
                <view class="phonenav">
                    <view class="cha" @click="closeorderjihe">
                        <image class="icon_gbcha" src="/static/img/icon_gbcha.png" mode="" />
                    </view>
                    <text class="jiename">完工打卡</text>
                    <text class="kmiao">为保证本人打卡，老板要求实名核验。</text>
                    <text class="renxie" @click.stop="navrouter('/pages/my/yhXieyi?key=nnrjrlyzxy')">《人脸验证服务协议》</text>
                    <view class="tuview">
                        <view class="tuitem tuchuan" @click="upload(2)" v-if="wangongimage">
                            <image class="icon_zp" :src="ossThree(wangongimage)" mode="" />
                        </view>
                        <view class="tuitem"  @click="upload(2)" v-if="!wangongimage">
                            <image class="icon_zp" src="/static/img/icon_zp.png" mode="" />
                            <text>人脸照片</text>
                        </view>
                       
                    </view>
                    <view class="dianbtn" @click="getwangong">
                        <text class="bm">确认</text>
                    </view>
                    <!-- <text class="kaolv"  @click="closeorder">取消</text> -->
                </view>
                
            </view>
            <view class="popone" style="height: 430rpx;min-height: 430rpx;" v-if="orderjihestatus ==6">
                <image class="bg" :src="ossThree('/uploads/20250404/a6740382ebb9492d9ed8c12c1e42d198.png')" mode="" />
                <view class="phonenav" style="height: 100%;">
                    <view class="cha" @click="closeorderjihe">
                        <image class="icon_gbcha" src="/static/img/icon_gbcha.png" mode="" />
                    </view>
                    <text class="jiename">催工资</text>
                    <text class="kmiao">已向老板催工资，如有问题可直接联系老板。</text>
                    <view class="dianbtn" style="margin-top: auto;" @click="getboda">
                        <text class="bm">拨打电话</text>
                    </view>
                    <text class="kaolv"  @click="closeorderjihe">再等等</text>
                </view>
                
            </view>
        </u-popup>
	</view>
</template>

<script>
    import {
		baseUrl
	} from '@/utils/config.js';
	export default {
		name: 'OrderPop',
		props: {
			orderjiheshow: {
				type: Boolean,
				default: false
			},
            orderjihestatus:{
                type:Number/String,
                default:1//1确认开工 2开工码 3实名打卡 4已开工
            },
            kaiinfo:{
                type: Object,
				default: {}
            },
            popid:{
                type: String,
				default: ''
            },
            popitem:{
                type: Object,
				default: {}
            }

		},
		data() {
			return {
                image:'',
                kgma:'',
                updatetype:1,//开工 2完工
                wangongimage:''
			};
		},
		created() {
			
		},
        watch: {
            popid:{
                handler(val, oldval) {
                    this.popid = val
                    console.log(this.popid)
                },
                immediate: false,
                deep: true
            },
        },
		mounted() {

		},
		methods: {
            closeorderjihe(){
                this.$emit("closeorderjihe")
            },
            upload(e) {
				this.updatetype = e
				uni.chooseImage({
					count: 1,
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						this.headimg = tempFilePaths[0];
						// this.isClick = true;
						this.unloadtou()
					}
				});
			},
			unloadtou(){
				// console.log(this.head_portrait)
				let that = this
				uni.uploadFile({
					url: baseUrl + '/api/common/upload', //仅为示例，非真实的接口地址
					filePath: this.headimg,
					name: 'file',
					header: {
						// 'content-type': 'application/json;charset=UTF-8',
						'token': uni.getStorageSync('token'),
					},
					formData: {
						'token':uni.getStorageSync('token')
					},
					success: (uploadFileRes) => {
						if(JSON.parse(uploadFileRes.data).code == 1){
							if(that.updatetype == 1){
                                that.image = JSON.parse(uploadFileRes.data).data.url
                            }else if(that.updatetype == 2){
                                //完工
                                that.wangongimage = JSON.parse(uploadFileRes.data).data.url
                            }
                            
						}else{
							that.$u.toast(JSON.parse(uploadFileRes.data).msg);
						}
						// that.getinfo()
					}
				});
			},
            getyulan(e){
                uni.previewImage({
                    current: e, // 当前显示图片的 http 链接
                    urls: [e] // 需要预览的图片 http 链接列表
                });
            },
            async getqueren(){
                //确认开工
                // editWorkStatus
                let res = await this.$u.api.editWorkStatus({
                	id:this.popid,
                    image:this.image
                });
                this.getorderjihestatus(4)//状态变成已开工
                this.$emit('getkaiwan')
            },
            async getwangong(){
                let res = await this.$u.api.endWorkStatus({
                	id:this.popid,
                    image:this.wangongimage
                });
                // this.getorderjihestatus(4)//状态变成已开工
                this.$emit('getwangong')
            },
            finish(e){
                this.kgma = e
            },
            getkaigong(){
               if(this.kaiinfo.start_code_text != this.kgma){
                    this.$u.toast("开工码错误");
                    return;
               }
               if(this.kaiinfo.is_facial==1){
                 this.getorderjihestatus(3)
               }else{
                // this.closeorderjihe()
                this.getqueren()
               }
            },
            getorderjihestatus(e){
                this.$emit('getorderjihestatus',e)
            },
            getrenlian(){
                if(!this.image){
                    this.$u.toast("请上传人脸照片");
                    return;
                }
                this.getqueren()
                
            },
            getboda(){
                
                let that = this
                uni.makePhoneCall({
                    phoneNumber: that.popitem.boss.mobile, //仅为示例，并非真实的电话号码
                    success: function() {
                        console.log("拨打电话成功！")
                        // 请求接口 报名成功
                    },
                    fail: function() {
                        console.log("拨打电话失败！")
                    }
                })
            }

		}
	};
</script>

<style lang="scss" scoped>
    /deep/.u-mode-center-box{
        background-color: transparent;
    }
    .queli{
        display: flex;
        flex-direction: column;
        width: 80%;
        margin: 40rpx 0rpx 70rpx;
        .queitem{
            display: flex;
            flex-direction: row;
            align-items: center;
            width: 100%;
            margin-bottom: 14rpx;
            .icon_xz_s{
                margin-right: 15rpx;
                width: 36rpx;
                height: 36rpx;
            }
            text{
                font-weight: 500;
                font-size: 28rpx;
                color: #111111;
            }
        }
        .queitem:last-child{
            margin-bottom: 0;
        }
    }
	.popone{
        width: 100%;
        background: #FFFFFF;
        border-radius: 30rpx;
        // height: 530rpx;
        // min-height: 530rpx;
        .bg{
            position: absolute;
            width: 100%;
            height: 300rpx;
            border-radius: 30rpx 30rpx 0 0 ;
        }
        .icon_gbcha{
            width: 40rpx;
            height: 40rpx;
            margin-left: auto;
            position: absolute;
            right: 30rpx;
            top: 30rpx;
        }
        .yuedu{
            height: 80rpx;
            display: flex;
            padding: 0 30rpx;
            align-items: center;
            .icon_xz_n{
                width: 36rpx;
                height: 36rpx;
                margin-right: 8rpx;
            }
            .xy{
                font-weight: 500;
                font-size: 20rpx;
                color: #999999;
                display: block;
                width: 90%;
            }
            .xyhu{
                color: rgba(234, 89, 24, 1);
            }
        }
        .kaolv{
            font-weight: bold;
            font-size: 28rpx;
            color: #666666;
            display: block;
            text-align: center;
            margin-top: 20rpx;
        }
        .phonenav{
            position: relative;
            // margin: 30rpx;
            display: flex;
            flex-direction: column;
            // justify-content: center;
            align-items: center;
            padding: 40rpx 30rpx;
            .img_aq{
                width: 173rpx;
                height: 211rpx;
                margin-bottom: 20rpx;
            }
            .jiename{
                font-weight: bold;
                font-size: 36rpx;
                color: #111111;
            }
            .queren{
                font-weight: 400;
                font-size: 24rpx;
                color: #666666;
                display: block;
                margin: 40rpx 0 80rpx;
            }
            .chaka{
                padding: 30rpx;
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                background: #F6F7F9;
                border-radius: 16rpx;
                margin: 25rpx 0;
                .chaname{
                    font-weight: bold;
                    font-size: 28rpx;
                    color: #111111;
                }
                .phonenum{
                    display: block;
                    font-weight: bold;
                    font-size: 50rpx;
                    color: #F06047;
                    margin: 10rpx 0;
                }
                .xiugai{
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    .noben{
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #666666;
                    }
                    .xiu{
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #F06047;
                        display: inline-block;
                        margin-left: 6rpx;
                    }
                }
            }
            .dianbtn{
                height: 90rpx;
                background: linear-gradient(90deg, #FF8F39, #FF4D43);
                border-radius: 45rpx;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 100%;
                margin-top: 20rpx;
                .bm{
                    font-weight: bold;
                    font-size: 28rpx;
                    color: #FFFFFF;
                }
                .bmmaio{
                    font-weight: 500;
                    font-size: 20rpx;
                    color: #FFFFFF;
                }
            }
            .bzhang{
                display: flex;
                flex-direction: row;
                align-items: center;
                margin-top: 30rpx;
                .icon_ts{
                    margin-right: 6rpx;
                    width: 24rpx;
                    height: 24rpx;
                }
                .zhiname{
                    font-weight: 400;
                    font-size: 20rpx;
                    color: #F06047;
                }
            }
        }
    }
    .kmiao{
        font-weight: 500;
        font-size: 28rpx;
        color: #111111;
        display: block;
        margin: 40rpx 0 20rpx;
    }
    .renxie{
        font-weight: 500;
        font-size: 28rpx;
        color: #FF8C39;
        display: block;
        margin-bottom: 50rpx;
    }
    .img_cg{
        width: 140rpx;
        height: 140rpx;
        margin-bottom: 15rpx;
    }
    .yikai{
        font-weight: bold;
        font-size: 36rpx;
        color: #111111;
    }
    .kaiti{
        background: #E9FFEB;
        border-radius: 6rpx;
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 20rpx 0 15rpx;
        padding:20rpx 10rpx;
        .kaione{
            display: flex;
            flex-direction: row;
            align-items: center;
            .icON_bz{
                margin-right: 7rpx;
                width: 24rpx;
                height: 24rpx;
            }
            .jianame{
                font-weight: bold;
                font-size: 28rpx;
                color: #16B925;
            }
        }
        .youxiao{
            font-weight: 500;
            font-size: 20rpx;
            color: #16B925;
            display: block;
            margin-top: 10rpx;
        }
    }
    .tuview{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
        width: 100%;
        margin: 30rpx;
		.tuitem{
			margin: 0 30rpx 0 0;
			width: 160rpx;
			height: 160rpx;
			background: #F8F8F8;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			position: relative;
			.icon_zp{
				width: 56rpx;
				height: 56rpx;
				margin-bottom: 20rpx;
			}
			text{
				font-weight: 500;
				font-size: 26rpx;
				color: #333333;
			}
		}
		.tuchuan{
			.icon_zp{
				position: absolute;
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
				margin-bottom: 0;
			}
		}
	}
</style>
